<template>
    <div class="min-h-screen bg-gray-100">
      <Navbar />
      
      <main class="container mx-auto px-4 py-8">
        <div class="mb-8">
          <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900">AI模型</h1>
          <p class="text-gray-600 mt-2">选择最适合您需求的AI模型</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <!-- 模型卡片1 -->
          <div class="bg-white rounded-xl shadow-md overflow-hidden transform hover:scale-[1.02] transition-transform duration-300">
            <div class="h-48 bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center">
              <i class="fa fa-comment text-white text-6xl"></i>
            </div>
            <div class="p-6">
              <div class="flex justify-between items-start mb-4">
                <div>
                  <h3 class="text-xl font-bold text-gray-900">聊天助手</h3>
                  <p class="text-gray-500 mt-1">基于GPT-4架构</p>
                </div>
                <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">基础模型</span>
              </div>
              <p class="text-gray-600 mb-4">强大的对话式AI，能够理解上下文并生成自然流畅的文本。适用于客户服务、聊天机器人等场景。</p>
              <div class="flex justify-between items-center">
                <span class="text-gray-900 font-bold">免费试用</span>
                <button class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors">
                  选择模型
                </button>
              </div>
            </div>
          </div>
          
          <!-- 模型卡片2 -->
          <div class="bg-white rounded-xl shadow-md overflow-hidden transform hover:scale-[1.02] transition-transform duration-300">
            <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-600 flex items-center justify-center">
              <i class="fa fa-file-text text-white text-6xl"></i>
            </div>
            <div class="p-6">
              <div class="flex justify-between items-start mb-4">
                <div>
                  <h3 class="text-xl font-bold text-gray-900">内容生成</h3>
                  <p class="text-gray-500 mt-1">基于GPT-4架构</p>
                </div>
                <span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">专业模型</span>
              </div>
              <p class="text-gray-600 mb-4">专为内容创作设计的AI模型，能够生成高质量的文章、故事、诗歌等内容。支持多种语言和风格。</p>
              <div class="flex justify-between items-center">
                <span class="text-gray-900 font-bold">¥0.002/1000字</span>
                <button class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors">
                  选择模型
                </button>
              </div>
            </div>
          </div>
          
          <!-- 模型卡片3 -->
          <div class="bg-white rounded-xl shadow-md overflow-hidden transform hover:scale-[1.02] transition-transform duration-300">
            <div class="h-48 bg-gradient-to-r from-green-500 to-teal-600 flex items-center justify-center">
              <i class="fa fa-bar-chart text-white text-6xl"></i>
            </div>
            <div class="p-6">
              <div class="flex justify-between items-start mb-4">
                <div>
                  <h3 class="text-xl font-bold text-gray-900">数据分析</h3>
                  <p class="text-gray-500 mt-1">基于GPT-4架构</p>
                </div>
                <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">高级模型</span>
              </div>
              <p class="text-gray-600 mb-4">强大的数据分析和洞察生成工具，能够处理复杂数据集，生成可视化报告和预测分析。</p>
              <div class="flex justify-between items-center">
                <span class="text-gray-900 font-bold">¥0.005/1000字</span>
                <button class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors">
                  选择模型
                </button>
              </div>
            </div>
          </div>
          
          <!-- 模型卡片4 -->
          <div class="bg-white rounded-xl shadow-md overflow-hidden transform hover:scale-[1.02] transition-transform duration-300">
            <div class="h-48 bg-gradient-to-r from-yellow-500 to-orange-600 flex items-center justify-center">
              <i class="fa fa-code text-white text-6xl"></i>
            </div>
            <div class="p-6">
              <div class="flex justify-between items-start mb-4">
                <div>
                  <h3 class="text-xl font-bold text-gray-900">代码助手</h3>
                  <p class="text-gray-500 mt-1">基于Codex架构</p>
                </div>
                <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">专业模型</span>
              </div>
              <p class="text-gray-600 mb-4">智能代码生成和编程助手，支持多种编程语言，能够理解代码上下文并提供智能建议。</p>
              <div class="flex justify-between items-center">
                <span class="text-gray-900 font-bold">¥0.003/1000字</span>
                <button class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors">
                  选择模型
                </button>
              </div>
            </div>
          </div>
          
          <!-- 模型卡片5 -->
          <div class="bg-white rounded-xl shadow-md overflow-hidden transform hover:scale-[1.02] transition-transform duration-300">
            <div class="h-48 bg-gradient-to-r from-red-500 to-orange-600 flex items-center justify-center">
              <i class="fa fa-image text-white text-6xl"></i>
            </div>
            <div class="p-6">
              <div class="flex justify-between items-start mb-4">
                <div>
                  <h3 class="text-xl font-bold text-gray-900">图像生成</h3>
                  <p class="text-gray-500 mt-1">基于DALL·E 3架构</p>
                </div>
                <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">高级模型</span>
              </div>
              <p class="text-gray-600 mb-4">根据文本描述创建高质量图像的AI模型，支持多种艺术风格和图像尺寸。</p>
              <div class="flex justify-between items-center">
                <span class="text-gray-900 font-bold">¥0.02/张</span>
                <button class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors">
                  选择模型
                </button>
              </div>
            </div>
          </div>
          
          <!-- 模型卡片6 -->
          <div class="bg-white rounded-xl shadow-md overflow-hidden transform hover:scale-[1.02] transition-transform duration-300">
            <div class="h-48 bg-gradient-to-r from-indigo-500 to-blue-600 flex items-center justify-center">
              <i class="fa fa-language text-white text-6xl"></i>
            </div>
            <div class="p-6">
              <div class="flex justify-between items-start mb-4">
                <div>
                  <h3 class="text-xl font-bold text-gray-900">翻译助手</h3>
                  <p class="text-gray-500 mt-1">基于NLLB架构</p>
                </div>
                <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">基础模型</span>
              </div>
              <p class="text-gray-600 mb-4">高精度语言翻译模型，支持超过200种语言的互译，保留原文的语气和风格。</p>
              <div class="flex justify-between items-center">
                <span class="text-gray-900 font-bold">¥0.001/1000字</span>
                <button class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors">
                  选择模型
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <div class="mt-12 bg-white rounded-xl shadow-md p-6">
          <h2 class="text-xl font-bold text-gray-900 mb-4">模型对比</h2>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">模型</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最大token</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">响应速度</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">支持语言</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">价格</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
                        <i class="fa fa-comment text-blue-500"></i>
                      </div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900">聊天助手</div>
                        <div class="text-sm text-gray-500">基础版</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">对话式</span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4,096</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">快</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10+</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">免费</td>
                </tr>
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center">
                        <i class="fa fa-file-text text-purple-500"></i>
                      </div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900">内容生成</div>
                        <div class="text-sm text-gray-500">专业版</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">生成式</span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8,192</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">中</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20+</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">¥0.002/1000字</td>
                </tr>
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-full flex items-center justify-center">
                        <i class="fa fa-bar-chart text-green-500"></i>
                      </div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900">数据分析</div>
                        <div class="text-sm text-gray-500">高级版</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">分析型</span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">16,384</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">慢</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5+</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">¥0.005/1000字</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </main>
      
      <Footer />
    </div>
  </template>
  
  <script>
  import Navbar from '../components/Navbar.vue'
  import Footer from '../components/Footer.vue'
  
  export default {
    name: 'ModelView',
    components: {
      Navbar,
      Footer
    },
    data() {
      return {
        models: [
          {
            id: 1,
            name: '聊天助手',
            type: '基础模型',
            description: '强大的对话式AI，能够理解上下文并生成自然流畅的文本。适用于客户服务、聊天机器人等场景。',
            icon: 'fa-comment',
            price: '免费试用',
            gradient: 'from-blue-500 to-indigo-600',
            badgeColor: 'bg-blue-100 text-blue-800'
          },
          {
            id: 2,
            name: '内容生成',
            type: '专业模型',
            description: '专为内容创作设计的AI模型，能够生成高质量的文章、故事、诗歌等内容。支持多种语言和风格。',
            icon: 'fa-file-text',
            price: '¥0.002/1000字',
            gradient: 'from-purple-500 to-pink-600',
            badgeColor: 'bg-purple-100 text-purple-800'
          },
          {
            id: 3,
            name: '数据分析',
            type: '高级模型',
            description: '强大的数据分析和洞察生成工具，能够处理复杂数据集，生成可视化报告和预测分析。',
            icon: 'fa-bar-chart',
            price: '¥0.005/1000字',
            gradient: 'from-green-500 to-teal-600',
            badgeColor: 'bg-green-100 text-green-800'
          },
          {
            id: 4,
            name: '代码助手',
            type: '专业模型',
            description: '智能代码生成和编程助手，支持多种编程语言，能够理解代码上下文并提供智能建议。',
            icon: 'fa-code',
            price: '¥0.003/1000字',
            gradient: 'from-yellow-500 to-orange-600',
            badgeColor: 'bg-yellow-100 text-yellow-800'
          },
          {
            id: 5,
            name: '图像生成',
            type: '高级模型',
            description: '根据文本描述创建高质量图像的AI模型，支持多种艺术风格和图像尺寸。',
            icon: 'fa-image',
            price: '¥0.02/张',
            gradient: 'from-red-500 to-orange-600',
            badgeColor: 'bg-red-100 text-red-800'
          },
          {
            id: 6,
            name: '翻译助手',
            type: '基础模型',
            description: '高精度语言翻译模型，支持超过200种语言的互译，保留原文的语气和风格。',
            icon: 'fa-language',
            price: '¥0.001/1000字',
            gradient: 'from-indigo-500 to-blue-600',
            badgeColor: 'bg-indigo-100 text-indigo-800'
          }
        ]
      }
    },
    methods: {
      selectModel(modelId) {
        // 这里可以添加选择模型的逻辑
        console.log(`Selected model: ${modelId}`)
        this.$router.push({ name: 'chat', params: { modelId } })
      }
    }
  }
  </script>
  
  <style scoped>
  /* 自定义样式可以在这里添加 */
  </style>
      